<template>
  <el-dialog class="dia_traces" title="运单详情" append-to-body :close-on-click-modal="closeOnclickModal"
             width="680px" top="2vh" :visible.sync="isDialogShow" @close="close">
    <div class="wayBill_box">
      <div>
        运单号：{{orderDetail.payStatus == 'FAIL'? '下单失败' : ((orderDetail.channelTag=='德邦'? orderDetail.wuliuId : orderDetail.waybill) || (orderDetail.orderStatus=='REFUNDED'? '已取消': '下单中'))}}
      </div>
      <div style="padding-left: 20px">下单渠道： {{orderDetail.channelTag}}</div>
    </div>
    <div class="content" v-loading="loading">
      <div class="order_content">
        <div class="content_item">
          <div>
            <div class="title" ><div class="icon ji">寄</div>寄件人信息</div>
            <div>{{orderDetail.sender}}</div>
            <div>{{orderDetail.senderMobile}}</div>
            <div>{{orderDetail.senderAddress}}</div>
          </div>
          <div>
            <div class="title"><div class="icon shou" style="background-color: #fd4a46">收</div>收件人信息</div>
            <div>{{orderDetail.receiver}}</div>
            <div>{{orderDetail.receiverMobile}}</div>
            <div>{{orderDetail.receiveAddress}}</div>
          </div>
        </div>
      </div>
      <div class="traces_box" style="margin-top: 10px">
        <div style="font-weight: bold; margin-bottom: 10px">物流跟踪</div>
        <el-timeline style="max-height: 200px; overflow-y: auto">
          <el-timeline-item
            v-for="(activity, index) in orderDetail.traces"
            type="primary"
            :key="index"
            :color="index == orderDetail.traces.length -1 ? '#409eff' : '#ddd'">
            {{activity}}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'DialogTraces',
    props: {
      id: {
        type: String
      },
      isTracesDialogShow: {
        type: Boolean,
        default: false
      },
      getDetailFunc: {
        type: Function,
        default: api.queryOrderDetail
      }
    },
    data () {
      return {
        isDialogShow: false,
        orderDetail: {},
        loading: true
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal', 'userInfo'])
    },
    watch: {
      isTracesDialogShow (newValue) {
        this.isDialogShow = newValue
        if (newValue) {
          this.getOrderDetail()
        }
      }
    },
    methods: {
      getOrderDetail () {
        this.getDetailFunc({id: this.id}).then(res => {
          this.orderDetail = res.data || {}
          this.loading = false
        })
      },
      close () {
        this.$emit('update:isTracesDialogShow', false)
        this.loading = true
      },
    }
  }
</script>

<style lang="scss">
  .dia_traces {
    .el-dialog__body {
      padding: 0;
    }
    .wayBill_box {
      display: flex;
      height: 30px;
      align-items: center;
      background-color: #000;
      padding: 0 20px;
      color: #fff;
      &>div {
        flex: 1;
      }
    }
    .order_content{
      .content_item {
        display: flex;
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        .title {
          margin-left: -5px;
          font-size: 12px; font-weight: bold; display: flex; align-items: center;
          .icon {
            height: 20px;
            width: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 15px;
            color: #fff;
            background-color: #0d4985;
            margin-right: 5px;
          }
        }
        &>div {
          flex: 1;
          padding: 10px 20px;
          border-right: 1px solid #ccc;
          >div {
            padding: 3px 0;
          }
        }
      }
      .content_item:first-child{
        border-top: 1px solid #ccc;
      }
    }
    .traces_box {
      padding: 15px 20px;
    }
    .el-timeline-item {
      padding-bottom: 15px;
    }
    .el-timeline-item__wrapper {
      top: -1px;
    }
  }
</style>
